<template>
  <el-table-column
    :key="code"
    :label="name"
    :min-width="200"
    :fixed="false"
    align="center"
  >
    <template
      #default="scope"
    >
      <!-- 编辑  -->
      <ik-table-datetime
        v-show="edit"
        :ref="'input_' + scope.$index + '_' + code"
        v-model="scope.row[code]"
        :line="scope.$index"
        :code="code"
        :name="name"
        :default-value="defaultValue"
        :format="format"
        :require="getRequire"
        :rules="rules"
        @onFieldChange="onFieldChange"
      />
      <!-- 显示 -->
      <ik-table-datetime-tag
        v-show="!edit"
        :value="scope.row[code]"
        :format="format"
        :error-sign="errorSign[scope.$index]"
        :message="message[scope.$index]"
      />
    </template>
  </el-table-column>
</template>

<script>
import IkTableDatetime from '@/components/ik/table/input/IkTableDatetime'
import IkTableDatetimeTag from '@/components/ik/table/input/IkTableDatetimeTag'

export default {
  name: 'IkColumnDatetime',
  components: {
    IkTableDatetime,
    IkTableDatetimeTag
  },
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      errorSign: [],
      message: []
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  methods: {
    onFieldChange(line, code, oldValue, value, errorSign, message) {
      this.$set(this.errorSign, line, errorSign)
      this.$set(this.message, line, message)
      this.$emit('onFieldChange', line, code, oldValue, value, errorSign, message)
    }
  }
}
</script>
<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}
</style>
<style lang="scss">
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
